<template>
    <a-modal
        title="新增风险提示"
        :visible="visible"
        :width="800"
        :confirmLoading="loading"
        @ok="handleOk"
        @cancel="() => $emit('cancel')"
    >
        <a-spin :spinning="loading">
            <a-form-model ref="form" :model="queryParam" :rules="rules">
                <a-row :gutter="24">
                    <a-col :md="8" :sm="8">
                        <a-form-model-item
                            label="风险提示"
                            prop="riskWarning"
                            :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                            :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
                        >
                            <BaseInput v-model="queryParam.riskWarning" placeholder="请输入" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-form-model-item
                            label="反馈期限"
                            prop="feedbackPeriod"
                            :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                            :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
                        >
                            <a-date-picker
                                @change="changeFeedback"
                                style="width: 100%"
                                placeholder="请选择"
                                :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                                format="YYYY-MM-DD HH:mm:ss"
                                v-model="queryParam.feedbackPeriod"
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-model-item
                            label="提示人员"
                            prop="reminder"
                            :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                            :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
                        >
                            <a-button type="primary" @click="getPersonnel" style="margin-right: 20px">添加提示人员</a-button>
                            <a-tag
                                closable
                                v-for="item in queryParam.reminder"
                                :key="item.name"
                                @close="deletePersonnel(item)"
                            >{{ item.name }}
                            </a-tag
                            >
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-model-item
                            label="上传附件"
                            prop="fileArrays"
                            :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                            :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
                        >
                            <l-table v-if="visible" @fileArrysData="fileArrysData"
                                     :businessCode="businessCode"></l-table>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-spin>
        <organizing-staff
            :visible="organizingStaffVisible"
            :loading="confirmLoading"
            :showAdd="false"
            :list="queryParam.reminder"
            :title="title"
            @cancel="() => (organizingStaffVisible = false)"
            @addJoinPersonnel="addPersonnel"
        ></organizing-staff>
    </a-modal>
</template>

<script>
import OrganizingStaff from '@/views/Legal/components/OrganizingStaff'
import deleteFun from '@/views/science/achievementsManage/delete'

export default {
    name: 'addResManagement',
    props: {
        visible: {
            type: Boolean,
            default: () => false
        },
        loading: {
            type: Boolean,
            default: () => false
        }
    },
    components: {
        OrganizingStaff
    },
    data() {
        return {
            queryParam: {
                fileArrays: [],
                reminder: []
            },
            businessCode: 'LCM04',
            title: '添加提示人员',
            organizingStaffVisible: false,
            rules: {
                riskWarning: [{ required: true, message: '请填写风险提示', trigger: 'change' }],
                feedbackPeriod: [{ required: true, message: '请选择反馈期限', trigger: 'change' }],
                reminder: [{ required: true, message: '请选择提示人员', trigger: 'blur' }],
                fileArrays: [{ type: 'array', required: true, message: '请上传附件', trigger: 'blur' }]
            },
            confirmLoading: false
        }
    },
    watch: {
        visible(e) {
            if (!e) {
                this.queryParam = { fileArrays: [], reminder: [] }
                this.$refs.form.clearValidate()
            }
        }
    },
    methods: {
        handleOk() {
            this.$refs.form.validate((val) => {
                if (val) {
                    this.$emit('ok', this.queryParam)
                }else {
                  this.$message.warning("请填写完所有必填项信息")
                }
            })
        },
        changeFeedback(date, datestring) {
            this.queryParam.feedbackPeriod = datestring
        },
        fileArrysData(val) {
            this.queryParam.fileArrays = val
            console.log(this.queryParam)
        },
        addPersonnel(list) {
            this.queryParam.reminder = list
        },
        deletePersonnel(i) {
            this.queryParam.reminder = deleteFun(this.queryParam.reminder, i)
        },
        getPersonnel() {
            this.organizingStaffVisible = true
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .ant-upload-list {
    padding-left: 70px;
    box-sizing: border-box;
}

.upload {
    color: rgba(0, 0, 0, 0.85);
    font-weight: normal;
    font-size: 14px;
    line-height: 1.5;
}
</style>
